@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/suppliermy/balance_add.css')}}">
@section('content')
<div class="mainHrContent" id="balanceAdd">
    <div class="payheader">
        <a href="{{route('home.index.index') }}">
            <img :src="headerLogo" alt="">
        </a>
        <div class='rightStep'>
            <div class="completed-step active"><a>填写充值金额</a></div>
            <div class="completed-step "><a>确认充值</a></div>
            <div class="completed-step "><a>充值完成</a></div>
        </div>
    </div>
    <div class="balanceAdd_main">
        <div class="balanceAdd_main_header">填写充值金额</div>
        <div class="balanceAdd_main_content">
            <p><span>充值账户：</span>@{{user_info.user_sn}}</p>
            <p style="align-items:flex-start"><span>充值金额：</span>
                <span class="balanceNotice">
                    <span>
                        <el-form :model="form" :rules="rules" ref="ruleForm">
                            <el-form-item prop="money">
                                <el-input size="mini" v-model="form.money"></el-input>元
                            </el-form-item>
                        </el-form>
                    </span>
                    <span class="balanceNoticeMin">
                        <span class="balanceNoticeMin_header"><a>
                                *
                            </a>
                            请注意：
                        </span>
                        <span class="balanceNoticeMin_main">
                            <span>
                                1.充值金额输入值必须是100或者100的倍数；
                            </span>
                            <span>
                                2.充值成功后，余额可能存在延迟现象，一般1到5分钟内到账，如有问题，请咨询客服；
                            </span>
                            <span>
                                充值完成后，您可以进入账户充值记录页面进行查看余额充值状态。
                            </span>
                        </span>
                    </span>
                </span>
            </p>
            <button @click="nextClick('ruleForm')">下一步</button>
        </div>
    </div>
</div>
<style>
    .balanceNotice .el-form-item__content {
        line-height: inherit;
    }
</style>
@endsection
@section('scripts')
<script>
    $(() => {
        let balanceAdd = new Vue({
            el: '#balanceAdd',
            data: () => {
                return {
                    headerLogo: '',
                    user_info: JSON.parse(sessionStorage.getItem("HRuserDetails")),
                    form: {
                        money: 100
                    },
                    rules: {
                        money: [{
                            required: true,
                            validator: validateNumMoney,
                            trigger: 'blur'
                        }],
                    },
                }
            },
            created() {
                this.headerLogo = JSON.parse(sessionStorage.getItem("overall")).site_logo
            },
            mounted() {

            },
            methods: {
                nextClick(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                money: this.form.money
                            }
                            apiAjax("{{ route('home.user.supplierRechargeOrderApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    window.location.href = "{{ route('home.suppliermy.supplierBalanceAddOrder') }}?id="+res.data;
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });

                                }
                            }, (erro) => {

                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });

                }
            }
        })
    })
</script>
@endsection